<style lang="scss">
  .emp {
    padding: 10px 0 0 12px;
    .el-aside {
      height: calc(100vh - 110px);
      border: 1px solid #ccc;
      .deptTree {
        li {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #666666;
          border-bottom: 1px solid #dddddd;
          padding-left: 30px;
          &:hover {
            background-color: #f0f7ff;
            cursor: pointer;
          }
          &.active {
            border-left: 2px solid #409eff;
            background-color: #f0f7ff;
          }
        }
      }
      .el-tree-node {
        border-bottom: 1px solid #ccc;
        .el-tree-node__content {
          height: 40px;
          line-height: 40px;
        }
      }
      .is-current {
        border-left: 2px solid #409eff;
      }
    }

    .el-main {
      padding: 0 12px !important;
      .top-div {
        margin-bottom: 8px;
        float: left;
      }
      .el-table {
        height: calc(100vh - 153px);
      }
    }
  }
</style>

<template>
  <el-container class="emp">
    <el-aside width="200px">
      <ul class="deptTree">
        <li
          v-for="(item, index) in deptTreeData"
          :class="item.bmid === currentTreeID ? 'active' : ''"
          :key="index"
          @click="treeNodeClickFn(item)"
        >{{item.bmjc}}</li>
      </ul>
    </el-aside>
    <el-main>
      <div class="top-div">
        <el-button type="primary" plain size="small" @click="synchroFn"><span class="el-icon-refresh"></span> 同步</el-button>
      </div>
      <el-table :data="tableItem.list" stripe height="-1" v-loading="loadingTable">
        <el-table-column prop="sort" label="排序" align="center" width="120px"></el-table-column>
        <el-table-column prop="name" label="人员姓名" align="center"></el-table-column>
        <el-table-column prop="phone" label="手机号码" align="center">
          <template slot-scope="scope">
            <el-input ref="input" size="mini" type="number" v-model="scope.row.phone" @blur="sjhChangeFn(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="isStaff" label="内勤" align="center" width="120px">
          <template slot-scope="scope">
            <el-switch
              active-color="#13ce66"
              v-model="scope.row.nqSwitch"
              @change="nqChangeFn(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="isHandle" label="办理人" align="center" width="120px">
          <template slot-scope="scope">
            <el-switch
              active-color="#13ce66"
              v-model="scope.row.blrSwitch"
              @change="blrChangeFn(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="lastTime" label="维护时间" align="center" :formatter="formatDate"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableItem.pageNum"
        :page-size="tableItem.pageSize"
        :page-sizes="[20, 30, 50]"
        :total="tableItem.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right;"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
  import $ from 'jquery'
  import { setTimeout } from 'timers'

  export default {
    data () {
      return {
        // 左侧单位树
        deptTreeData: [],
        defaultProps: {
          children: 'sub',
          label: 'bmmc'
        },
        loadingTable: false,
        // 显示默认展示页
        currentTreeID: '',
        // 表格列表
        tableItem: {},
        tableHeight: -1,
        // 表格数据查询条数
        pageParam: {
          pageNum: 1,
          pageSize: 20,
          condition: {
            bmid: ''
          }
        },
        // 人员信息修改
        userInfos: {
          ryid: '',
          bmid: '',
          nqSwitch: false,
          blrSwitch: false,
          phone: ''
        }
      }
    },
    methods: {
      // 查询单位树信息
      getDeptTreeData () {
        this.$axios.post(this.$api.dept.selector).then(rs => {
          if (rs) {
            this.deptTreeData = rs
            let data = rs[0]
            this.treeNodeClickFn(data)
            // 查询人员列表
            this.getUserPage()
          }
        })
      },
      // tree点击
      treeNodeClickFn (data, node) {
        this.currentTreeID = data.bmid
        this.getUserPage()
      },
      // 获取督办人员列表
      getUserPage () {
        const _this = this
        _this.pageParam.condition.bmid = _this.currentTreeID
        _this.loadingTable = true
        _this.$axios.post(_this.$api.emp.page, _this.pageParam)
          .then(function (rs) {
            if (rs) {
              _this.tableItem = rs
              _this.loadingTable = false
            }
          })
      },
      // 分页
      handleSizeChange: function (size) {
        this.pageParam.pageSize = size
        this.getUserPage()
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.pageParam.pageNum = currentPage
        this.getUserPage()
      },
      // 日期格式化
      formatDate: function (row, column) {
        const _this = this
        var date = row.lastTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日 HH时mm分')
      },
      // 数据同步
      synchroFn: function () {
        const _this = this
        _this.loadingTable = true
        _this.$axios.get(_this.$api.emp.synchronize + '/' + _this.currentTreeID).then(function (rs) {
          if (rs) {
            _this.$message({
              message: '数据同步成功!',
              showClose: true,
              type: 'success'
            })
            _this.loadingTable = false
            _this.getUserPage()
          } else {
            _this.$message.error('数据同步失败!')
            _this.loadingTable = false
            _this.getUserPage()
          }
        })
      },
      // 修改手机号码
      sjhChangeFn: function (item) {
        const _this = this
        // 判断是否有数据
        if (item.phone === '') {
          return
        }
        // 人员信息
        _this.userInfos.ryid = item.ryid
        _this.userInfos.phone = item.phone
        _this.$axios.post(_this.$api.emp.mobile, _this.userInfos).then(function (rs) {
          if (rs) {
            _this.$message({
              message: '操作成功!',
              showClose: true,
              type: 'success'
            })
            _this.getUserPage()
          } else {
            _this.getUserPage()
          }
        })
      },
      // switch切换
      nqChangeFn: function (item) {
        const _this = this
        // 人员信息
        _this.userInfos.ryid = item.ryid
        _this.userInfos.bmid = item.bmid
        _this.userInfos.nqSwitch = item.nqSwitch
        _this.$axios.post(_this.$api.emp.staff, _this.userInfos).then(function (rs) {
          if (rs) {
            _this.$message({
              message: '操作成功!',
              showClose: true,
              type: 'success'
            })
            _this.getUserPage()
          } else {
            _this.getUserPage()
          }
        })
      },
      blrChangeFn: function (item) {
        const _this = this
        // 人员信息
        _this.userInfos.ryid = item.ryid
        _this.userInfos.bmid = item.bmid
        _this.userInfos.blrSwitch = item.blrSwitch
        _this.$axios
          .post(_this.$api.emp.handler, _this.userInfos)
          .then(function (rs) {
            if (rs) {
              _this.$message({
                message: '操作成功!',
                showClose: true,
                type: 'success'
              })
              _this.getUserPage()
            }
          })
      }
    },
    created: function () {
      this.getDeptTreeData()
    }
  }
</script>
